<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      v-for="(item, index) in songDtails"
      :key="index"
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 内容部分 -->
    <div
      class="contentBox-Bk"
      :style="`background-image: url('${musicImgUrl}')`"
    ></div>
    <audio

    autoplay
    v-show="isShowAodio"
      :src="audioSrc"
      @canplay="getDuration"
      controls
      ref="audio"
      @timeupdate="currentTimeUpdate"
    ></audio>
    <!-- 光碟显示 -->
    <div class="songCoverBox" v-show="isLyric" @click="lyricGo">
      <div class="stickBox1" v-show="isStickGo"></div>
      <div class="stickBox2" v-show="!isStickGo"></div>
      <div class="CD-ROMBox">
        <div class="coverPhotoBox">
          <img v-show="isTurn" :src="musicImgUrl" alt="" class="aniMationImg" />
          <img v-show="!isTurn" :src="musicImgUrl" alt="" />
        </div>
      </div>
    </div>
    <!-- 歌词显示 -->
    <div class="lyricBox" v-show="!isLyric" @click="CDGo">
      <ul class="lyricList" ref='lyricList'>
        <li
          v-for="(item, index) in treatLyrics"
          :class="currentIndex == index ? 'active' : ''"
          :key="index"
        >
          {{ item.content }}
        </li>
      </ul>
    </div>
    <!-- 底部的菜单栏部分 -->
    <div class="operationArea">
      <div class="menuBarBox">
        <ul class="menuBarList">
          <li>
            <img src="../assets/img/list-3.png" alt="" />
          </li>
          <li>
            <img src="../assets/img/list-4.png" alt="" />
          </li>
          <li>
            <img src="../assets/img/list-2.png" alt="" />
          </li>
        </ul>
      </div>
      <div class="progressBarBox">
        <van-slider
          v-model="currentTime"
          @change="onChange"
          min="0"
          :max="songtime"
        />
      </div>
      <div class="switchBox">
        <ul class="switchList">
          <li>
            <img src="../assets/img/循环.png" alt="" />
          </li>
          <li>
            <img src="../assets/img/pre_l.png" alt="" />
          </li>
          <li v-show="!isPalyKey" @click="playKey">
            <img
              src="../assets/img/play.png"
              alt=""
              style="width: 50px; height: 50px"
            />
          </li>
          <li v-show="isPalyKey" @click="pauseKey">
            <img
              src="../assets/img/pause.png"
              alt=""
              style="width: 50px; height: 50px"
            />
          </li>
          <li>
            <img src="../assets/img/pre_r.png" alt="" />
          </li>
          <li>
            <img src="../assets/img/列表.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getSongDetails, getLyrics } from "../api/api";
// import { Toast } from "vant";
export default {
  name: "mp3",
  data() {
    return {
      songDtails: "",
      title: "",
      value: 50,
      isPalyKey: true, //开始键切换
      isStickGo: true, //点击开始棒子放到光碟上
      isTurn: true, //点击开始图片开始转动
      isLyric: true, //是否显示歌词
      musicImgUrl: "", //背景图片
      lyric: "", //歌词
      treatLyrics: [], // 处理后的歌词
      audioSrc: "", //mp3
      songtime: 0, //获取时长
      currentTime: 0, //进度条的值
      currentIndex: 0,
      isPlay: false,
      isShowAodio:false//隐藏audio
    };
  },
  created() {
      
    this.audioSrc = `https://music.163.com/song/media/outer/url?id=${this.$route.query.id}.mp3`;
    // 获取歌曲详情接口
    getSongDetails(this.$route.query.id).then((res) => {
      console.log(res);
      this.songDtails = res.songs;
      this.title = res.songs[0].name;
      this.musicImgUrl = res.songs[0].al.picUrl;
      this.$refs.audio.play();
    });
    // 获取歌词接口
    getLyrics(this.$route.query.id).then((res) => {
      console.log(res);
      if (res.code === 200) {
        this.lyric = res.lrc.lyric;
        // 处理歌词
        if (this.lyric) {
          let lrcContent = this.lyric.split(/\n/);
          let reg = /\[\d*:\d*\.\d*\]/g;
          // 没有歌词
          if (!this.lyric.match(reg)) {
            this.treatLyrics = lrcContent.map((item) => {
              return {
                time: -1,
                content: item,
              };
            });
            return;
          }
          lrcContent.forEach((item) => {
            let content = item.match(reg);
            if (content) {
              content.forEach((i) => {
                // console.log(i)
                // [00:23.720]
                // 分钟
                let min = Number(i.match(/\[\d*/)[0].replace("[", ""));
                // 秒
                let mec = Number(i.match(/:\d*/)[0].replace(":", ""));
                // console.log(min)
                // console.log(mec)
                let time = min * 60 + mec;

                let content = item.replace(reg, "");

                if (content) {
                  this.treatLyrics.push({
                    time,
                    content,
                  });
                }
              });
            }
          });
        }
      }
    });
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onClickRight() {
      //   Toast("按钮");
    },
    onChange(value) {
      // Toast("当前值：" + value);
      this.$refs.audio.currentTime = value;

      this.currentIndex =
        this.treatLyrics.findIndex((item) => {
          return item.time > value;
        }) - 1;
    },
    // 获取时长
    getDuration() {
      console.log(this.$refs.audio.duration); //此时可以获取到duration
      this.songtime = this.$refs.audio.duration;
    },
    // 检测音频实时更新
    currentTimeUpdate(e) {
      this.currentTime = e.target.currentTime;
    },
    // 点击开始键
    playKey() {
      this.isPalyKey = true;
      this.isStickGo = true;
      this.isTurn = true;
      console.log(2445);

      console.dir(this.$refs.audio);
      console.log(this.$refs.audio.duration);
      this.$refs.audio.play();
      this.isPlay = !this.isPlay;
    },
    // 点击暂停键
    pauseKey() {
      this.isPalyKey = false;
      this.isStickGo = false;
      this.isTurn = false;

      this.isPlay = !this.isPlay;
      this.$refs.audio.pause();
    },
    // 点击显示歌词
    lyricGo() {
      this.isLyric = false;
    },
    // 点击显示光碟
    CDGo() {
      console.log(356);
      this.isLyric = true;
    },
  },
  watch: {
    "$refs.audio.readyState"() {
      console.log(this.$refs.audio.readyState);
    },

    currentTime() {
      // 当检测到进度条的当前值发生改变时，索引也跟着发生改变
      this.currentIndex =
        this.treatLyrics.findIndex((item) => {
          return item.time > this.currentTime;
        }) - 1;
        // 歌词滚动
        this.$refs.lyricList.scrollTop+=30
        // 找到当前哪句歌词被选中
       console.log( this.$refs.lyricList.children[ this.currentIndex])
                this.$refs.lyricList.scrollTop =   this.$refs.lyricList.children[ this.currentIndex].offsetTop - 320
    },
  },
};
</script>
<style scoped lang="less">
.active {
  color: #fff !important;
}
.contentBox-Bk {
  background-image: url("https://p1.music.126.net/f-7zBvmBQsHuFPeSOkqt7g==/109951165246665165.jpg");
  background-color: #161824;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: scale(1.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  opacity: 1;
  transform-origin: center center;
  filter: blur(30px);
}
.songCoverBox {
  width: 296px;
  /* height: 65%; */
  height: 433px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* background-color: red; */
}
.operationArea {
  width: 100%;
  height: 130px;
  position: fixed;
  bottom: 30px;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 15px;
  /* background-color: pink; */
}
.stickBox1 {
  position: absolute;
  width: 110px;
  height: 190px;
  top: -13px;
  left: 50%;
  margin-left: -20px;
  transform-origin: left top;
  background: url("../assets/img/stick_bg.png") no-repeat;
  background-size: contain;
  z-index: 1;
}
.stickBox2 {
  transform: rotate(-24deg) scale(1.5, 1.6);
  position: absolute;
  width: 73px;
  height: 190px;
  top: -7px;
  left: 50%;
  margin-left: -20px;
  transform-origin: left top;
  background: url("../assets/img/stick_bg.png") no-repeat;
  background-size: contain;
  z-index: 1;
}
/* 光碟部分 */
.CD-ROMBox {
  width: 296px;
  height: 296px;
  position: absolute;
  left: 0;
  right: 0;
  top: 77px;
  bottom: 0;
  z-index: 0;
  background: url("../assets/img/blackCircle.png") no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: rotation-data-v-1f74b18f 8s linear infinite;
}
/* 覆盖图片 */
.coverPhotoBox {
  width: 184px;
  height: 184px;
  border-radius: 50%;
}
.coverPhotoBox > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.aniMationImg {
  animation: aniMationImg 6s linear infinite;
}
@keyframes aniMationImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 底部菜单部分 */

.menuBarBox {
}
.menuBarList {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.menuBarList > li {
  width: calc(100% / 3 - 10%);
  text-align: center;
}
.menuBarList > li > img {
  width: 25px;
  height: 25px;
}

.switchList {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.switchList > li {
  width: calc(100% / 5 - 3%);
  text-align: center;
}
.switchList > li > img {
  width: 25px;
  height: 25px;
}
/* 歌词显示 */
.lyricList {
  text-align: center;
  color: #c7c4c4;
  height: 300px;
  overflow: auto;
  margin-top: 70px;
  padding: 10px 22px;
}
.lyricList > li {
  padding: 5px 0;
  color: #bbb;
}
</style>
